<template>
  <div class="login-page">
    <div class="orange"> </div>
    <div class="blue"></div>
    <div class="blue small"></div>
    <div class="login-box">
      <div class="logo-box">
        <div class="right">
          <div class="sys-name">⽐特OJ后台管理</div>
          <div class="sys-sub-name">帮助100万学⽣就业</div>
        </div>
      </div>
      <div class="form-box">
        <div class="form-item">
          <img src="../assets/images/shouji.png">
          <el-input
            placeholder="请输⼊账号"
            v-model="loginUser.userAccount"
          />
        </div>
        <div class="form-item">
          <img src="../assets/images/yanzhengma.png">
          <el-input
            placeholder="请输⼊密码"
            v-model="loginUser.password"
            @keydown.enter="login"
            type="password"
            show-password
          />
        </div>
        <div
          class="submit-box"
          @click="login"
        >
          登录
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { reactive } from 'vue';
  import { sysUserLogin } from '@/apis/sysUserApi';
  import { setToken } from '@/utils/cookie';
  import router from '@/router';

  const loginUser = reactive({
    userAccount: '',
    password: ''
  })

  async function login() {
    try {
      const result = await sysUserLogin(loginUser);
      // 存储token到本地 跳转页面
      setToken(result.data)

      const path = router.currentRoute.value.query.path
      if (path) {
        router.push(path)
      } else {
        router.push('/oj/layout')
      }
    } catch (error) {
      console.log(error);

    }
  }
</script>

<style lang="scss" scoped>
  .login-page {
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;

    .login-box {
      overflow: hidden;

      .logo-box {
        display: flex;
        align-items: center;
        margin-bottom: 30px;

        img {
          width: 68px;
          height: 68px;
          margin-right: 16px;
        }

        .sys-name {
          height: 33px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 24px;
          color: #222222;
          line-height: 33px;
          margin-bottom: 13px;
        }

        .sys-sub-name {
          height: 22px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 16px;
          color: #222222;
          line-height: 22px;
        }
      }

      :deep(.form-box) {
        .submit-box {
          margin-top: 90px;
          width: 456px;
          height: 48px;
          background: #32C5FF;
          border-radius: 8px;
          cursor: pointer;
          display: flex;
          justify-content: center;
          align-items: center;
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 16px;
          color: #FFFFFF;
          letter-spacing: 1px;
        }

        .form-item {
          display: flex;
          align-items: center;
          width: 456px;
          height: 48px;
          background: #F8F8F8;
          border-radius: 8px;
          margin-bottom: 30px;
          position: relative;

          .code-btn-box {
            position: absolute;
            right: 0;
            width: 151px;
            height: 48px;
            background: #32C5FF;
            border-radius: 8px;
            top: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;

            span {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 16px;
              color: #FFFFFF;
            }
          }

          .error-tip {
            position: absolute;
            width: 140px;
            text-align: right;
            padding-right: 12px;
            height: 20px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #FD4C40;
            line-height: 20px;
            right: 0;

            &.bottom {
              right: 157px;
            }
          }

          .el-input {
            width: 380px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 16px;
            color: #222222;
          }

          .el-input__wrapper {
            border: none;
            box-shadow: none;
            background: transparent;
            width: 230px;
            padding-left: 0;
          }

          img {
            width: 24px;
            height: 24px;
            margin: 0 18px;
          }
        }
      }

      width:456px;
      height:404px;
      background: #FFFFFF;
      box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
      border-radius: 10px;
      opacity: 0.9;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
      padding: 0 72px;
      padding-top: 50px;
    }

    &::after {
      position: absolute;
      top: 0;
      left: 0;
      height: 100vh;
      bottom: 0;
      right: 0;
      background: rgba(255, 255, 255, .8);
      z-index: 1;
      content: '';
    }

    .orange {
      background: #F0714A;
      width: 498px;
      height: 498px;
      border-radius: 50%;
      background: #F0714A;
      opacity: 0.67;
      filter: blur(50px);
      left: 14.2%;
      top: 41%;
      position: absolute;
    }

    .blue {
      width: 334px;
      height: 334px;
      background: #32C5FF;
      opacity: 0.67;
      filter: blur(50px);
      left: 14.2%;
      top: 42%;
      position: absolute;
      top: 16.3%;
      left: 80.7%;

      &.small {
        width: 186px;
        height: 186px;
        top: 8.2%;
        left: 58.2%;
      }
    }
  }
</style>